<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('插槽使用示例')}`">{{ $t('插槽使用示例') }}</t>
        </template>
        <sib-form style="width: 600px;" :fields="fields" @submit="submit">
            <!-- 提交/重置按钮后方的插槽位置 -->
            <!-- eslint-disable-next-line vue/no-unused-vars -->
            <template #more-operations="{ form }">
                <el-button icon="Position">更多操作</el-button>
            </template>
            <!-- 控件的 code 为 "chacao" 开启的插槽位置 -->
            <template #chacao="{ form }">
                <el-input v-model="form.chacao" placeholder="Please input" clearable></el-input>
            </template>
            <!-- 控件的 code 为 "name" 的单行文本输入框头部位置的插槽 -->
            <template #name-input-prepend>
                <span>头部</span>
            </template>
            <!-- 控件的 code 为 "sex" 的选择框自定义选项内容的插槽 -->
            <template #sex-option="{ option }">
                <span>{{ option.label }}<span style="color: pink;">（value：{{ option.value }}）</span></span>
            </template>
            <!-- 控件的 code 为 "address" 的单行文本输入框尾部位置的插槽 -->
            <template #address-input-append>
                <span>尾部</span>
            </template>
            <!-- 控件的 code 为 "photo" 的替换上传按钮的插槽 -->
            <template #photo-upload>
                <el-button type="success">Click to upload</el-button>
            </template>
        </sib-form>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref([
            {
                label: '姓名',
                code: 'name',
                type: 'text',
                maxlength: 30,
                required: true,
            },
            {
                label: '性别',
                code: 'sex',
                type: 'select',
                options: [
                    {
                        label: '男',
                        value: '1',
                    },
                    {
                        label: '女',
                        value: '2',
                    },
                ],
            },
            {
                label: '出生地',
                code: 'address',
                type: 'text',
                required: true,
            },
            {
                label: '插槽',
                code: 'chacao',
                type: 'slot',
                required: true,
            },
            {
                label: '照片',
                code: 'photo',
                type: 'upload',
                listType: 'picture-card',
                autoUpload: false,
                limit: 3,
            },
        ]);

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return {
            fields,
            submit,
            templateString: `<template>
    <sib-form style="width: 600px;" :fields="fields" @submit="submit">
        <!-- 提交/重置按钮后方的插槽位置 -->
        <template #more-operations="{ form }">
            <el-button icon="Position">更多操作</el-button>
        </template>
        <!-- 控件的 code 为 "chacao" 开启的插槽位置 -->
        <template #chacao="{ form }">
            <el-input v-model="form.chacao" placeholder="Please input" clearable></el-input>
        </template>
        <!-- 控件的 code 为 "name" 的单行文本输入框头部位置的插槽 -->
        <template #name-input-prepend>
            <span>头部</span>
        </template>
        <!-- 控件的 code 为 "sex" 的选择框自定义选项内容的插槽 -->
        <template #sex-option="{ option }">
            <span>{{ option.label }}<span style="color: pink;">（value：{{ option.value }}）</span></span>
        </template>
        <!-- 控件的 code 为 "address" 的单行文本输入框尾部位置的插槽 -->
        <template #address-input-append>
            <span>尾部</span>
        </template>
        <!-- 控件的 code 为 "photo" 的替换上传按钮的插槽 -->
        <template #photo-upload>
            <el-button type="success">Click to upload</el-button>
        </template>
    </sib-form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref([
            {
                label: '姓名',
                code: 'name',
                type: 'text',
                maxlength: 30,
                required: true,
            },
            {
                label: '性别',
                code: 'sex',
                type: 'select',
                options: [
                    {
                        label: '男',
                        value: '1',
                    },
                    {
                        label: '女',
                        value: '2',
                    },
                ],
            },
            {
                label: '出生地',
                code: 'address',
                type: 'text',
                required: true,
            },
            {
                label: '插槽',
                code: 'chacao',
                type: 'slot',
                required: true,
            },
            {
                label: '照片',
                code: 'photo',
                type: 'upload',
                listType: 'picture-card',
                autoUpload: false,
                limit: 3,
            },
        ]);

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return { fields, submit };
    },
};
<\/script>`,
        };
    },
};
</script>
